<template>
  <div class="page-container">
    <!-- 固定头部 -->
    <header class="header">
      <div class="header-content">
        <!-- 左侧logo -->
        <div class="logo" @click="toIndex()">
          <img
            class="image_top"
            referrerpolicy="no-referrer"
            src="./assets/img/top.png"
          />
        </div>

        <!-- 右侧按钮 -->
        <div class="header-actions">
          <el-button class="login_btn1 my_btn" @click="toAccount" v-if="name != null && name != ''">My Account</el-button>
          <el-button class="login_btn my_btn" @click="tologin" v-if="name == null || name == ''">Login</el-button>
          <el-button class="postads_btn" @click="postAds">Post&nbsp;Ads</el-button>
        </div>
      </div>
    </header>

    <!-- 可滚动内容区域 -->
    <main class="main-content">
      <div class="content">
        <!--   查询条件   -->
        <div class="box_1 flex-row">
          <el-select v-model="categoryName" class="search1" placeholder="Please Select">
            <el-option v-for="category in categorys" :label="category.name" :value="category.id" :key="category.id" />
          </el-select>
          <!--        <el-input class="search1" v-model="city" placeholder="City name"></el-input>-->
          <el-select
            class="search1"
            v-model="cityName"
            filterable
            remote
            reserve-keyword
            placeholder="City name"
            :remote-method="remoteMethod"
            :loading="loading">
            <el-option
              v-for="item in cityOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-input class="search1" v-model="queryName" placeholder="Enter query"></el-input>

          <el-button class="search2" style="margin-left: auto;margin-right: 5px;" @click="toSearch">Search</el-button>
        </div>


        <!-- 这里放置你的页面主要内容 -->
        <div class="center_content">

          <el-steps :active="active" finish-status="success" class="steps">
            <el-step title="Edit ad"></el-step>
            <el-step title="Preivew ad"></el-step>
            <el-step title="Ad Upgrade"></el-step>
            <el-step title="Publish"></el-step>
          </el-steps>
          <el-form ref="form" :model="form" label-width="20px" :rules="rulesForm">

            <div v-if="active == 0" class="step">
              <div class="stepTitle">
                Step.1<span class="stepTitle2">Edit ad</span>
              </div>

              <el-row>
                <el-col :span="12">
                  <div class="title1"><span style="color: red">*</span>Category:</div>
                </el-col>
                <el-col :span="12">
                  <div class="title1">Country:</div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item prop="category">
                    <el-select v-model="form.category" placeholder="Please Select" style="width:100%;">
                      <el-option v-for="category in categorys" :label="category.name" :value="category.id" :key="category.id" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item>
                    <el-select v-model="form.country" placeholder="Please Select" style="width:100%;">
                      <el-option v-for="country in countrys" :label="country.name" :value="country.name" :key="country.id" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <div class="title1"><span style="color: red">*</span>Location:</div>
                </el-col>
                <el-col :span="12">
                  <div class="title1"><span style="color: red">*</span>City:</div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item prop="location">
                    <el-select v-model="form.location" placeholder="Please Select" style="width:100%;" @change="selLocation">
                      <el-option v-for="location in locations" :label="location.name" :value="location.name" :key="location.name" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="city">
                    <span v-for="c in selCities">{{c}},</span>
                    <el-button class="search2" style="margin-left: auto;margin-right: 5px;" @click="SelectCity">Select City</el-button>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  <div class="title1"><span style="color: red">*</span>Title:</div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item prop="title1">
                    <el-input v-model="form.title"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="8">
                  <div class="title1"><span style="color: red">*</span>Age:</div>
                </el-col>
                <el-col :span="8">
                  <div class="title1"><span style="color: red">*</span>Phone:</div>
                </el-col>
                <el-col :span="8">
                  <div class="title1"><span style="color: red">*</span>Full address:</div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item prop="age">
                    <el-input v-model="form.age"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="phone">
                    <el-input v-model="form.phone"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="fullAddress">
                    <el-input v-model="form.fullAddress"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  <div class="title1"><span style="color: red">*</span>Description:</div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24" style="margin-top: -25px;margin-bottom: 20px;" >
                  <el-form-item prop="description">
                    <quill-editor
                      v-model="form.description"
                      ref="myQuillEditor"
                      :options="editorOption"
                      class="editor"
                    />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="2">
                  <div class="title1"><span style="color: red">*</span>Payment:</div>
                </el-col>
                <el-col :span="22">
                  <el-form-item prop="checkedCities">
                    <el-checkbox-group multiple v-model="form.checkedCities">
                      <el-checkbox v-for="payment in payments" :label="payment" :value="payment" :key="payment">{{payment}}</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="2">
                  <div class="title1"><span style="color: red">*</span>Type:</div>
                </el-col>
                <el-col :span="22">
                  <el-form-item>
                    <el-radio-group v-model="form.callType">
                      <el-radio label="Incall" name="type"></el-radio>
                      <el-radio label="Outcall Card" name="type"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="2">
                  <div class="title1">Photos:</div>
                </el-col>
                <el-col :span="22">
                  <el-form-item prop="pictureUrl">
                    <el-upload
                      multiple
                      :action="imgUpload.url"
                      :headers="imgUpload.headers"
                      :on-success="handlePictureSuccess"
                      :before-upload="beforePictureUpload"
                      :limit="30"
                      list-type="picture-card"
                      :file-list="fileListShow"
                      :on-preview="handlePictureCardPreview"
                      :on-remove="handleRemove"
                      :on-exceed="handleExceed">
                      <i class="el-icon-plus"></i>
                    </el-upload>
                    <!--图片预览的dialog-->
                    <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="dialogImageUrl">
                    </el-dialog>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="8">
                  ㅤ
                </el-col>
                <el-col :span="8">
                  <el-button style="margin-top: 12px; width: 100%; background-color: #FF3A90;line-height: 30px;font-size: 20px;color: #FFFFFF;" @click="next">Save</el-button>
                </el-col>
              </el-row>


            </div>

            <div v-if="active == 1" class="step">

              <div class="stepTitle">
                Step.2<span class="stepTitle2">Preview ad</span>
              </div>

              <!-- 标题 -->
              <div class="title2">
                {{form.title}}
              </div>

              <!-- 发布时间和查看次数 -->
              <div class="time2">
                <span>
                  <img style="width: 12px; height: 12px;" src="./assets/img/time.png">
                </span>
                <span>
                  Update&nbsp;time：{{ formattedDate }}
                </span>
                <span>
                  <img style="width: 16px; height: 12px;" src="./assets/img/view.png">
                </span>
                <span>
                  View: {{ view }}
                </span>
              </div>

              <!-- 轮播图 -->
              <div class="banner2" v-if="fileListPut.length > 0">
                <div class="photo-list">
                  <div
                    v-for="(photo, index) in fileListPut"
                    :key="index"
                    class="photo-item"
                  >
                    <img :src="photo.url" class="thumbnail">
                  </div>
                </div>
              </div>

              <div class="split2">
                Related Introduction
              </div>

              <div>
                <div class="left" style="padding: 10px 20px;">
                  <br>
                    <div class="ql-editor" v-html="form.description"></div>
                  <br>
                </div>
              </div>

              <!-- 表格 -->
              <div class="container2">
                <table style="width: 90%" bgcolor="#FAEBF1">
                  <tr>
                    <td>Post ID:</td>
                    <td>23367360</td>
                  </tr>
                  <tr>
                    <td>Poster's age:</td>
                    <td>{{ form.age }}</td>
                  </tr>
                  <tr>
                    <td>Mobile:</td>
                    <td>{{ form.phone }}</td>
                  </tr>
                  <tr>
                    <td>City:</td>
                    <td>{{ form.city }}</td>
                  </tr>
                  <tr>
                    <td>Address:</td>
                    <td>{{ form.fullAddress }}</td>
                  </tr>
                </table>
              </div>

              <el-row>
                <el-col :span="4">
                  ㅤ
                </el-col>
                <el-col :span="4">
                  <el-button style="margin-top: 12px; width: 100%; background-color: #FF3A90;line-height: 30px;font-size: 20px;color: #FFFFFF;" @click="previous">Previous</el-button>
                </el-col>
                <el-col :span="8">
                  ㅤ
                </el-col>
                <el-col :span="4">
                  <el-button style="margin-top: 12px; width: 100%; background-color: #FF3A90;line-height: 30px;font-size: 20px;color: #FFFFFF;" @click="next">Next</el-button>
                </el-col>
              </el-row>

            </div>

            <!-- 步骤三 -->
            <div v-if="active == 2" class="step">

              <div class="stepTitle">
                Step.3<span class="stepTitle2">Ad Upgrade</span>
              </div>

              <div class="title3">
                <span>Your credit is : </span><span style="color: #E81566">${{integral}}</span>
              </div>
              <div class="container3">
                <div class="box">
                  <div style="height: 60px; background: #E81566; text-align: center; font-size: 16px; color: white; font-weight: bold; padding-top: 22px;">
                    Move Ad to Top of Listings
                  </div>
                  <div style="height: 326px; background: white; padding-top: 33px; font-size: 14px; text-align: center; font-weight: 400;">
                    <el-checkbox-group multiple v-model="topMode">
                      <el-checkbox v-for="tm in topModes" :label="tm.value" :key="tm.value">{{tm.name}}</el-checkbox>
                    </el-checkbox-group>
                    <el-select style="margin-top: 10px;" v-model="form.topDays" placeholder="Please Select">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                    <div>
                      Staring now from: $
                      <span v-if="topMode != null && topMode.length == 1 && form.topDays">
                        {{topMoney * selCities.length * form.topDays}}
                      </span>
                      <span v-if="topMode == null || topMode.length == 0">0.00</span>
                    </div>
                    <div class="work-intro">
                      <div class="title">
                        <hr>
                      </div>
                    </div>
                    <div class="c31">
                      Select this upgrade to pin the ad at the top of thead area and display a thumbnail under the ad title.it's alawys one the toop when you turn the pageSelect a fixed upgrade time(calcublted in hours,after which itwill beautomatically cancelled)
                    </div>
                  </div>
                </div>
                <div class="box">
                  <div style="height: 60px; background: #4D78FE; text-align: center; font-size: 16px; color: white; font-weight: bold; padding-top: 22px;">
                    Auto Repost Ad
                  </div>
                  <div style="height: 326px; background: white; padding-top: 33px; font-size: 14px; text-align: center; font-weight: 400;">
                    <el-checkbox-group multiple v-model="autoMode">
                      <el-checkbox v-for="tm in autoModes" :label="tm.value" :key="tm.value">{{tm.name}}</el-checkbox>
                    </el-checkbox-group>
                    <el-select style="margin-top: 10px;" v-model="form.autoDays" placeholder="Please Select">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                    <div>
                      Auto refresh time:
                    </div>
                    <el-select style="margin-top: 10px;" v-model="form.autoReflushTime" placeholder="Please Select">
                      <el-option
                        v-for="item in flushOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                    <div>
                      Staring now from: $
                      <span v-if="autoMode != null && autoMode.length == 1 && form.autoDays">
                    {{autoMoney * selCities.length * form.autoDays}}
                  </span>
                      <span v-if="autoMode == null || autoMode.length == 0">0.00</span>
                    </div>
                    <div class="work-intro">
                      <div class="title">
                        <hr>
                      </div>
                    </div>
                    <div class="c31">
                      lf you select this upgrade,the advertisement will beautomatically refreshed to the top of theadvertising area list according to the set time fromthe next day
                    </div>
                  </div>
                </div>
                <div class="box">
                  <div style="height: 60px; background: #FE9B4D; text-align: center; font-size: 16px; color: white; font-weight: bold; padding-top: 22px;">
                    Highlight your Ad
                  </div>
                  <div style="height: 326px; background: white; padding-top: 33px; font-size: 14px; text-align: center; font-weight: 400;">
                    <el-checkbox-group multiple v-model="highlightMode">
                      <el-checkbox v-for="tm in highlightModes" :label="tm.value" :key="tm.value">{{tm.name}}</el-checkbox>
                    </el-checkbox-group>
                    <el-select style="margin-top: 10px;" v-model="form.highlightDays" placeholder="Please Select">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                    <div>
                      Staring now from: $
                      <span v-if="highlightMode != null && highlightMode.length == 1 && form.highlightDays">
                    {{highlightMoney * selCities.length * form.highlightDays}}
                  </span>
                      <span v-if="highlightMode == null || highlightMode.length == 0">0.00</span>
                    </div>
                    <div class="work-intro">
                      <div class="title">
                        <hr>
                      </div>
                    </div>
                    <div class="c31">
                      Select this upgrade to bold the font of the ad titleand make the title text red
                    </div>
                  </div>
                </div>
                <div class="box">
                  <div style="height: 60px; background: #B64DFE; text-align: center; font-size: 16px; color: white; font-weight: bold; padding-top: 22px;">
                    Post an now
                  </div>
                  <div style="height: 326px; background: white; padding-top: 33px; font-size: 14px; text-align: center; font-weight: 400;">
                    <el-checkbox-group>
                      <el-checkbox label="1" checked disabled>Move to top every day for the next:</el-checkbox>
                    </el-checkbox-group>
                    <div>
                      Staring now from: ${{normalMoney * selCities.length}}
                    </div>
                    <div class="work-intro">
                      <div class="title">
                        <hr>
                      </div>
                    </div>
                    <div class="c31">
                      Your ad will appear immediately in the city whereyou're posted
                    </div>
                  </div>
                </div>
              </div>


              <el-row>
                <el-col :span="4">
                  ㅤ
                </el-col>
                <el-col :span="4">
                  <el-button style="margin-top: 12px; width: 100%; background-color: #FF3A90;line-height: 30px;font-size: 20px;color: #FFFFFF;" @click="previous">Previous</el-button>
                </el-col>
                <el-col :span="8">
                  ㅤ
                </el-col>
                <el-col :span="4">
                  <el-button style="margin-top: 12px; width: 100%; background-color: #FF3A90;line-height: 30px;font-size: 20px;color: #FFFFFF;" @click="next">Save</el-button>
                </el-col>
              </el-row>

            </div>
          </el-form>
          <div v-if="active == 3" class="step">

            <div class="stepTitle">
              Step.4<span class="stepTitle2">Publish</span>
            </div>

            <div class="container4">
              <img style="width: 240px; height: 240px;" src="./assets/img/success.png"></img>
            </div>
            <div class="title4">
              Successful advertising
            </div>

            <el-row v-if="urls.length > 0">
              <el-col :span="6">
                ㅤ
              </el-col>
              <el-col :span="11">
                <el-input disabled v-model="urls[0]" placeholder="url" />
              </el-col>
              <el-col :span="1">
                <el-button class="copyBtn1" :data-clipboard-text="urls[0]" type="primary" icon="el-icon-document-copy" @click="copy1"></el-button>
              </el-col>
              <el-col :span="6">

              </el-col>
            </el-row>

            <el-row v-if="urls.length > 1">
              <el-col :span="6">
                ㅤ
              </el-col>
              <el-col :span="11">
                <el-input disabled v-model="urls[1]" placeholder="url" />
              </el-col>
              <el-col :span="1">
                <el-button class="copyBtn2" :data-clipboard-text="urls[1]" type="primary" icon="el-icon-document-copy" @click="copy2"></el-button>
              </el-col>
              <el-col :span="6">

              </el-col>
            </el-row>

            <el-row v-if="urls.length > 2">
              <el-col :span="6">
                ㅤ
              </el-col>
              <el-col :span="11">
                <el-input disabled v-model="urls[2]" placeholder="url" />
              </el-col>
              <el-col :span="1">
                <el-button class="copyBtn3" :data-clipboard-text="urls[2]" type="primary" icon="el-icon-document-copy" @click="copy3"></el-button>
              </el-col>
              <el-col :span="6">

              </el-col>
            </el-row>

            <el-row v-if="urls.length > 3">
              <el-col :span="6">
                ㅤ
              </el-col>
              <el-col :span="11">
                <el-input disabled v-model="urls[3]" placeholder="url" />
              </el-col>
              <el-col :span="1">
                <el-button class="copyBtn4" :data-clipboard-text="urls[3]" type="primary" icon="el-icon-document-copy" @click="copy4"></el-button>
              </el-col>
              <el-col :span="6">

              </el-col>
            </el-row>

            <el-row v-if="urls.length > 4">
              <el-col :span="6">
                ㅤ
              </el-col>
              <el-col :span="11">
                <el-input disabled v-model="urls[4]" placeholder="url" />
              </el-col>
              <el-col :span="1">
                <el-button class="copyBtn5" :data-clipboard-text="urls[4]" type="primary" icon="el-icon-document-copy" @click="copy5"></el-button>
              </el-col>
              <el-col :span="6">

              </el-col>
            </el-row>

            <el-row>
              <el-col :span="8">
                ㅤ
              </el-col>
              <el-col :span="8">
                <el-button style="margin-top: 12px; width: 100%; background-color: #FF3A90;line-height: 30px;font-size: 20px;color: #FFFFFF;" @click="toAccount">My Account</el-button>
              </el-col>
            </el-row>
          </div>

        </div>
      </div>
    </main>

    <!-- 固定底部 -->
    <footer class="footer">
      <div class="footer1">Terms｜About&nbsp;us｜Contact&nbsp;us｜Privacy</div>
      <div class="footer1">Email:topgirlspage88@gmail.com</div>
      <hr>
      <div class="footer1">Copyright&nbsp;©&nbsp;2025&nbsp;topgirlspage.com&nbsp;All&nbsp;Rights&nbsp;Reserved</div>
    </footer>

    <!--  弹窗提示  -->
    <el-dialog title="Publisth ad rules" :visible.sync="outerVisible">
      Before the topgirlspage.com writes the advertisement
      You agree to follow these rules:
      <br>
      1.All posters must be of legal age.
      <br>
      2.You may not post any content or information of anyone that is not of legal age.
      <br>
      3.You may not mention or infer that any person advertised is of less than legal age. Words like "young", "school girl-like" or similar may not be used.
      <br>
      4.You may not post images or personal information of another person without consent.
      <br>
      5.It is forbidden to publish any pictures and words involving nudity, genitalia, violence, drugs, guns, child trafficking and women. Once found, the account will be deleted and IP login will be permanently closed
      <div slot="footer" class="dialog-footer">
        <el-button class="cancel_btn" @click="outerVisible = false">Cancle</el-button>
        <el-button class="ok_btn" type="primary" @click="toPublish">I Agree</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改参数配置对话框 -->
    <el-dialog title="Select City" :visible.sync="selCity" width="700px" append-to-body>
      <el-row>
        <div style="font-size: 20px; maring: 10px 0px;"><span style="color: red">*</span>Selected City:</div>
        <span style="font-size: 20px; maring: 10px 0px;" v-for="c in checkedCitys">{{c}},</span>
      </el-row>
      <el-row>
        <el-col :span="24">
<!--          <el-checkbox-group
            v-model="checkedCitys"
            :min="1">
            <el-checkbox v-for="city in citys" :label="city.name" :key="city.name">
              <span style="font-size: 20px;">{{ city.name }}</span>
            </el-checkbox>
          </el-checkbox-group>-->
          <el-checkbox-group
            v-model="checkedCitys"
            :min="1"
            class="checkbox-group"
          >
            <el-checkbox
              v-for="city in citys"
              :label="city.name"
              :key="city.name"
              class="checkbox-item"
            >
              <span style="font-size: 20px;">{{ city.name }}</span>
            </el-checkbox>
          </el-checkbox-group>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancel_btn" @click="closeSelectCity">Cancel</el-button>
        <el-button class="ok_btn" type="primary" @click="SelectCityOk">Ok</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getIntegral } from '@/api/login'
import store from "@/store";
import { mapGetters } from "vuex";
import { cmsCity, getCityAndZhou } from "@/api/cms/city";
import {updateAdvertised, getUpdateById, mode} from "@/api/cms/ad";
import { getModel } from "@/api/system/mode"
import { getToken } from "@/utils/auth";
import Clipboard from 'clipboard'

import { quillEditor } from 'vue-quill-editor'

// 引入富文本编辑器样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
  ['blockquote', 'code-block'],

  [{'header': 1}, {'header': 2}],               // custom button values
  [{'list': 'ordered'}, {'list': 'bullet'}],
  [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
  [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
  [{'direction': 'rtl'}],                         // text direction

  [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
  // [{'header': [1, 2, 3, 4, 5, 6, false]}],

  [{'color': []}, {'background': []}],          // dropdown with defaults from theme
  // [{'font': []}],
  [{'align': []}],
  ['clean']                                         // remove formatting button
];

export default {
  components: {
    quillEditor
  },
  data() {
    return {
      checkedCitys: [],
      // 是否显示选择城市弹窗
      checked: true,
      selCity: false,
      integral: 0.00,
      // 登录用户id
      userId:store.state.user.id,
      outerVisible: false,
      topMoney: 0.00,
      autoMoney: 0.00,
      highlightMoney: 0.00,
      normalMoney: 0.00,
      urls: [],
      list: [],
      loading: false,
      cityOptions: [],
      flushOptions: [
        {
          value: '00',
          label: '00:00'
        }, {
          value: '01',
          label: '01:00'
        }, {
          value: '02',
          label: '02:00'
        }, {
          value: '03',
          label: '03:00'
        }, {
          value: '04',
          label: '04:00'
        }, {
          value: '05',
          label: '05:00'
        }, {
          value: '06',
          label: '06:00'
        }, {
          value: '07',
          label: '07:00'
        }, {
          value: '08',
          label: '08:00'
        }, {
          value: '09',
          label: '09:00'
        }, {
          value: '10',
          label: '10:00'
        }, {
          value: '11',
          label: '11:00'
        }, {
          value: '12',
          label: '12:00'
        }, {
          value: '13',
          label: '13:00'
        }, {
          value: '14',
          label: '14:00'
        }, {
          value: '15',
          label: '15:00'
        }, {
          value: '16',
          label: '16:00'
        }, {
          value: '17',
          label: '17:00'
        }, {
          value: '18',
          label: '18:00'
        }, {
          value: '19',
          label: '19:00'
        }, {
          value: '20',
          label: '20:00'
        }, {
          value: '21',
          label: '21:00'
        }, {
          value: '22',
          label: '22:00'
        }, {
          value: '23',
          label: '23:00'
        }
      ],
      options: [
        {
          value: '1',
          label: '1'
        }, {
          value: '2',
          label: '2'
        }, {
          value: '3',
          label: '3'
        }, {
          value: '4',
          label: '4'
        }, {
          value: '5',
          label: '5'
        }, {
          value: '6',
          label: '6'
        }, {
          value: '7',
          label: '7'
        }, {
          value: '8',
          label: '8'
        }, {
          value: '9',
          label: '9'
        }, {
          value: '10',
          label: '10'
        }, {
          value: '11',
          label: '11'
        }, {
          value: '12',
          label: '12'
        }, {
          value: '13',
          label: '13'
        }, {
          value: '14',
          label: '14'
        }, {
          value: '15',
          label: '15'
        }, {
          value: '16',
          label: '16'
        }, {
          value: '17',
          label: '17'
        }, {
          value: '18',
          label: '18'
        }, {
          value: '19',
          label: '19'
        }, {
          value: '20',
          label: '20'
        }, {
          value: '21',
          label: '21'
        }, {
          value: '22',
          label: '22'
        }, {
          value: '23',
          label: '23'
        }, {
          value: '24',
          label: '24'
        }, {
          value: '25',
          label: '25'
        }, {
          value: '26',
          label: '26'
        }, {
          value: '27',
          label: '27'
        }, {
          value: '28',
          label: '28'
        }, {
          value: '29',
          label: '29'
        }, {
          value: '30',
          label: '30'
        }],
      value: '1',

      fileList: [],
      video: '',
      //图片上传判断是否有相同图片
      isCommonName: true,
      //修改时此属性用于接收数据库中图片存储list，图片才能正常显示
      fileListShow: [],
      fileListPut: [],
      dialogImageUrl: '',
      dialogVisible: false,
      imgUpload: {
        // 设置上传的请求头部
        headers: {
          Authorization: "Bearer " + getToken()
        },
        // 图片上传的方法地址:
        url: process.env.VUE_APP_BASE_API + "/common/upload1",
        url2: process.env.VUE_APP_BASE_API,
      },

      // 顶部查询条件
      categoryName:'',
      cityName: '',
      queryName: '',

      payments: ['Cash', 'Credit Card', 'PayPal', 'Venmo', 'Zelle'],
      topModes: [{
        name:'Move to top every day for the next:',
        value:1
      }],
      autoModes: [{
        name:'Move your ad to the top of the   ㅤ  ㅤ listings evre 1 day after:',
        value:1
      }],
      highlightModes: [{
        name:'Move to top every day for the next:',
        value:1
      }],
      province: [],
      categorys: [{
        id: '2',
        name: 'Bodyrubs'
      },{
        id: '3',
        name: 'Escorts'
      },{
        id: '4',
        name: 'All'
      }],
      countrys: [{
        id: '1',
        name: 'USA'
      }],
      locations: [{
        "name": "Alabama"
      }, {
        "name": "Alaska"
      }, {
        "name": "Arizona"
      }, {
        "name": "Arkansas"
      }, {
        "name": "California"
      }, {
        "name": "Colorado"
      }, {
        "name": "Connecticut"
      }, {
        "name": "Delaware"
      }, {
        "name": "District of Columbia"
      }, {
        "name": "Florida"
      }, {
        "name": "Georgia"
      }, {
        "name": "Hawaii"
      }, {
        "name": "Idaho"
      }, {
        "name": "Illinois"
      }, {
        "name": "Indiana"
      }, {
        "name": "Iowa"
      }, {
        "name": "Kansas"
      }, {
        "name": "Kentucky"
      }, {
        "name": "Louisiana"
      }, {
        "name": "Maine"
      }, {
        "name": "Maryland"
      }, {
        "name": "Massachusetts"
      }, {
        "name": "Michigan"
      }, {
        "name": "Minnesota"
      }, {
        "name": "Mississippi"
      }, {
        "name": "Missouri"
      }, {
        "name": "Montana"
      }, {
        "name": "Nebraska"
      }, {
        "name": "Nevada"
      }, {
        "name": "New Hampshire"
      }, {
        "name": "New Jersey"
      }, {
        "name": "New Mexico"
      }, {
        "name": "New York"
      }, {
        "name": "North Carolina"
      }, {
        "name": "North Dakota"
      }, {
        "name": "Ohio"
      }, {
        "name": "Oklahoma"
      }, {
        "name": "Oregon"
      }, {
        "name": "Pennsylvania"
      }, {
        "name": "Rhode Island"
      }, {
        "name": "South Carolina"
      }, {
        "name": "South Dakota"
      }, {
        "name": "Tennessee"
      }, {
        "name": "Texas"
      }, {
        "name": "Utah"
      }, {
        "name": "Vermont"
      }, {
        "name": "Virginia"
      }, {
        "name": "Washington"
      }, {
        "name": "West Virginia"
      }, {
        "name": "Wisconsin"
      }, {
        "name": "Wyoming"
      }],
      citys: [],
      selCities: [],
      active: 0,
      autoMode: [],
      topMode: [],
      highlightMode: [],
      form: {
        checkedCities: [],
        callType: 'Incall',
        city: '',
        fileIds: '',
        category: '',
        location: '',
        title: '',
        age: '',
        phone: '',
        fullAddress: '',
        description: '',
        payment: '',
      },
      videoUrl: '',
      // p2 start
      date: new Date(),
      view: 0,
      // p2 end
      // 富文本编辑器
      editorOption:{
        placeholder:'',
        theme: 'snow',
        modules: {
          toolbar: {
            container: toolbarOptions,  // 工具栏
          }
        }
      },

      // 校验规则
      rulesForm: {
        category: [
          {required: true, message: 'required', trigger: 'blur'}
        ],
        location: [
          {required: true, message: 'required', trigger: 'blur'}
        ],
        city: [
          // {required: true, message: 'required', trigger: 'blur'}
        ],
        title: [
          {required: true, message: 'required', trigger: 'blur'},
          {max: 50, message: 'max 200', tigger: 'blur'}
        ],
        age: [
          {required: true, message: 'required', trigger: 'blur'},
          // {type: 'number', message: 'need a number', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: 'required', trigger: 'blur'}
        ],
        fullAddress: [
          {required: true, message: 'required', trigger: 'blur'}
        ],
        // description: [
        //   {required: true, message: 'required', trigger: 'blur'},
        //   {max: 5000, message: 'max 5000', tigger: 'blur'}
        // ],
        checkedCities: [
          {required: true, message: 'required', trigger: 'blur'}
        ],
        showModal: false,
        currentIndex: 0,
      }
    };
  },
  methods: {
    query(id) {
      let that = this
      getUpdateById(id).then(res => {
        if (res.data) {
          that.form.id = res.data.id
          that.form.category = res.data.category
          that.form.country = res.data.country
          that.form.location = res.data.location
          // todo: 处理城市
          var cities_1 = new Array()
          cities_1.push(res.data.city)
          this.selCities = cities_1
          this.checkedCitys = cities_1
          cmsCity(res.data.location).then(res => {
            for (var i = 0; i < res.data.length; i++) {
              that.citys.push({'name':res.data[i].name})
            }
          });

          that.form.title = res.data.title
          that.form.age = res.data.age
          that.form.phone = res.data.phone
          that.form.fullAddress = res.data.fullAddress
          that.form.description = res.data.description
          that.form.checkedCities = res.data.payment.substring(0, res.data.payment.length - 1).split(',')
          that.form.callType = res.data.callType

          console.log(that.url2)
          // 处理图片
          for (let i = 0; i < res.data.fileInfos.length; i++) {
            let currentFile = {name: '',url: ''};
            currentFile.name = res.data.fileInfos[i].fileObjectName;
            currentFile.url = that.imgUpload.url2 + res.data.fileInfos[i].filePath;
            that.fileListPut.push(currentFile);
          }
          that.fileListShow = that.fileListPut
          that.form.fileIds = that.fileListPut
        } else {
          this.toAccount()
        }
      })
    },
    // 确认选择城市
    SelectCityOk() {
      this.selCities = this.checkedCitys
      this.selCity = false
    },
    // 取消按钮
    closeSelectCity() {
      this.checkedCitys = []
      this.selCity = false
    },
    SelectCity() {
      if (this.form.location) {
        this.checkedCitys = this.selCities
        this.selCity = true
        console.log(this.form.location)
        // 通过洲获取城市
      } else {
        this.$message.error('Please input Location!');
      }
    },
    toIndex() {
      this.$router.push({
        path: "/cms/main/cmsIndex"
      });
    },
    getCityAndZhou() {
      getCityAndZhou().then(res => {
        this.list = res.data.map(item => {
          return { value: `${item.zhouName}`, label: `${item.zhouName}` };
        })
      });
    },
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.cityOptions = this.list.filter(item => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.cityOptions = [];
      }
    },
    inputVedio(item) {
      this.video = item
    },
    inputUrl(item) {
      this.videoUrl = item
    },
    //图片上传前的相关判断
    beforePictureUpload(file) {
      //每次进来初始化 isCommonName 为true
      this.isCommonName = true;
      const isJPG = file.type === 'image/jpeg';
      const isLt1M = file.size / 1024 / 1024 < 1;
      const countImg = this.fileListPut.length < 30;
      //判断是否有相同的图片，如何有即提示并添加失败
      if(this.fileListPut.length > 0){
        this.fileListPut.forEach((item,index)=>{
          if(item.name == file.name){
            this.$message.error('The same image already exists！');
            this.isCommonName = false;
          }
        })
      }
      if (!countImg) {
        this.$message.error('You can upload up to 30 images！');
      }
      if (!isJPG) {
        this.$message.error('Please upload a file in image format！');
      }
      if (!isLt1M) {
        this.$message.error('Uploaded images cannot exceed 1MB!');
      }
      return countImg && isJPG && isLt1M && this.isCommonName;
    },
    //图片上传删除
    handleRemove(file, fileList) {
      // 删除图片数组
      this.fileList = this.fileList.filter(function(item) {
        return item !== file.response.fileId
      });
      //根据传进来删除的file里图片，同时删除保存在fileListPut的相同图片
      if(this.fileListPut.length > 0){
        this.fileListPut = this.fileListPut.filter((item, index)=>{
          return item.name != file.name;
        })
      }
    },
    // 图片数量超过限制
    handleExceed() {
      this.$message.warning('You can upload up to 30 images！');
    },
    //图片预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //图片上传成功后的回调
    handlePictureSuccess(res, file) {
      this.fileList.push(res.fileId)
      //this.fileList.push(file)
      //设置图片访问路径
      const imgObjectUrl = this.imgUpload.url2 + file.response.fileName;
      //这是每个成功上传图片，以对象的形式保存在一个数组中，进而以JSON格式保存在数据库中某个字段里
      let currentFile = {name: '',url: ''};
      currentFile.name = file.name;
      currentFile.url = imgObjectUrl;
      // 往此数组中保存当前图片对象
      this.fileListPut.push(currentFile);
    },
    next() {
      var that = this
      // 初始化拼接串
      if (this.active == 0) {
        // 表单校验，不通过 返回false
        this.$refs.form.validate((valid) => {
          if (this.selCities.length <= 0) {
            this.$message.error('Please select city!')
            return;
          }
          if (valid) {
            this.form.payment = ''
            this.form.city = ''
            this.form.fileIds = ''
            for (var i = 0; i < this.form.checkedCities.length; i++) {
              this.form.payment += this.form.checkedCities[i] + ","
            }
            for (var i = 0; i < this.selCities.length; i++) {
              this.form.city += this.selCities[i] + ","
            }
            for (var i = 0; i < this.fileList.length; i++) {
              this.form.fileIds += this.fileList[i] + ","
            }
            //this.form.fileIds += this.video

            if (this.active++ > 3) this.active = 0;
          } else {
            this.$message.error('form error， place check !')
            return;
          }
        })
      } else if (this.active == 1) {
        if (this.active++ > 3) this.active = 0;
      } else if (this.active == 2) {
        // 提交form
        if (this.topMode != null && this.topMode.length == 1) {
          this.form.topMode = this.topMode[0]
        }
        if (this.autoMode != null && this.autoMode.length == 1) {
          this.form.autoMode = this.autoMode[0]
        }
        if (this.highlightMode != null && this.highlightMode.length == 1) {
          this.form.highlightMode = this.highlightMode[0]
        }
        updateAdvertised(this.form).then(res => {
          that.urls = res.data
        });
        if (this.active++ > 3) this.active = 0;
      }

    },
    previous() {
      this.active =  this.active - 1;
    },
    toPublish() {
      this.$router.push({
        path: "/cmsPublish"
      });
    },
    tologin() {
      this.$router.push({
        path: "/cmsLogin"
      });
    },
    toAccount() {
      this.$router.push({
        path: "/cmsAcount"
      });
    },
    postAds() {
      this.outerVisible = true
    },
    selLocation(value) {
      this.citys = []
      this.city = ''

      this.cmsCity2(value)
    },
    toSearch() {
      this.$router.push({
        path: "/list?category=" + this.categoryName + "&city=" + this.cityName + "&query=" + this.queryName
      });
    },
    // 选择洲出发函数
    cmsCity2(value) {
      var that = this
      that.citys = []
      that.selCities = []
      cmsCity(value).then(res => {
        for (var i = 0; i < res.data.length; i++) {
          that.citys.push({'name':res.data[i].name})
        }
      });
    },
    mode() {
      mode().then(res => {
        this.topMoney = res.data.topMoney
        this.autoMoney = res.data.autoMoney
        this.highlightMoney = res.data.highlightMoney
        this.normalMoney = res.data.normalMoney
      })
    },
    copy1() {
      var clipboard = new this.Clipboard('.copyBtn1')
      clipboard.on('success', () => {
        this.$message.success('复制成功')
        clipboard.destroy()
      })
      clipboard.on('error', () => {
        this.$message.error('复制失败')
        clipboard.destroy()
      })
    },
    copy2() {
      var clipboard = new this.Clipboard('.copyBtn2')
      clipboard.on('success', () => {
        this.$message.success('复制成功')
        clipboard.destroy()
      })
      clipboard.on('error', () => {
        this.$message.error('复制失败')
        clipboard.destroy()
      })
    },
    copy3() {
      var clipboard = new this.Clipboard('.copyBtn3')
      clipboard.on('success', () => {
        this.$message.success('复制成功')
        clipboard.destroy()
      })
      clipboard.on('error', () => {
        this.$message.error('复制失败')
        clipboard.destroy()
      })
    },
    copy4() {
      var clipboard = new this.Clipboard('.copyBtn4')
      clipboard.on('success', () => {
        this.$message.success('复制成功')
        clipboard.destroy()
      })
      clipboard.on('error', () => {
        this.$message.error('复制失败')
        clipboard.destroy()
      })
    },
    copy5() {
      var clipboard = new this.Clipboard('.copyBtn5')
      clipboard.on('success', () => {
        this.$message.success('复制成功')
        clipboard.destroy()
      })
      clipboard.on('error', () => {
        this.$message.error('复制失败')
        clipboard.destroy()
      })
    },
    // 图片
    openModal(index) {
      console.info(index)
      this.currentIndex = index;
      this.showModal = true;
      // 阻止事件冒泡，避免触发模态框的点击事件
      event.stopPropagation();
    },
    closeModal() {
      //this.showModal = false;
    }
  },
  created() {
    // 获取四种模式需要的金额
    this.mode()
    this.getCityAndZhou()
    // 获取账户余额
    getIntegral().then(res => {
      this.integral = res.data
    }).catch(error => {
      reject(error)
    })
    // 获取表单数据
    var id = this.$route.query.id
    if (id) {
      this.query(id)
    }
  },
  // p2 start
  computed: {
    ...mapGetters([
      'avatar',
      'name'
    ]),
    formattedDate() {
      const options = {
        weekday: 'long',
        year: 'numeric',
        month: 'long',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        hour12: true, // 使用12小时制
      };
      return new Intl.DateTimeFormat('en-US', options).format(this.date);
    },
    currentPhoto() {
      return this.fileListPut[this.currentIndex] || {};
    }
  },
  // p2 end
}
</script>

<style scoped>
.editor {
  line-height: normal !important;
  height: 400px;
  margin-bottom: 50px;
}

/* 重置默认边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.page-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* 头部样式 */
.header {
  height: 60px;
  background-color: white;
  color: white;
  padding: 0 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.image_top {
  width: 252px;
  height: 52px;
  margin: 8px 0 0 240px;
}

.header-actions {
  display: flex;
  gap: 15px;
}

.my_btn {
  height: 40px;
  background: linear-gradient( #FF3A90 0%, #C6044B 100%);
  border-radius: 6px;
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: 500;
  font-size: 16px;
  color: #FFFFFF;
  line-height: 24px;
  text-align: center;
  font-style: normal;
  margin: 8px 0 0 calc(100vw - 1000px);
}

.login_btn {
  width: 84px;
}

.login_btn1 {
  width: 140px;
}

.postads_btn {
  width: 105px;
  height: 40px;
  background: #2D1B0B;
  border-radius: 6px;
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: 500;
  font-size: 16px;
  color: #FBD798;
  line-height: 24px;
  text-align: center;
  font-style: normal;
  margin: 8px 0 0 8px;
}

/* 中间内容区域 */
.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background-color: #FFF6F9;
}

.content {
  max-width: 1200px;
  margin: 0 auto;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.box_1 {
  max-width: 1200px;
  height: 52px;
  /*background: url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPngf5d0297da7e4a7c3d534b43a2ea85fa403a16d5a578c427828027844f7782e13) 100% no-repeat;*/
  background: url(../cms/assets/img/search_bg.png) 100% no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
  justify-content: flex-start;
}

.search1 {
  /*width: 200px;*/
  width: calc(33vw - 40px);
  margin: auto 5px;
}

.search2 {
  width: 120px;
  /*width: 20%;*/
  height: 40px;
  text-align: center;
  margin: auto;
  color: #E81566;
  float: right;
}

.center_content {
  width: 60vw;
  margin: 0 auto;
  overflow-y: auto;
}

.steps {
  margin: 20px 0;
}

.step {
  width: 100%;
  /*height: calc(100vh - 195px);*/
  background-color: white;
  overflow-y:auto;
  padding-bottom: 200px;
  padding-top: 20px;
  padding-right: 20px;
}

.stepTitle {
  margin: 20px 0px 20px 32px;
  font-size: 24px;
  color: #111111;
}

.stepTitle2 {
  font-weight: 400;
  font-size: 16px;
  color: #666666;
}

.title {
  margin-top: 16px;
  height: 12px;
}

.title1 {
  margin-left: 20px;
  height: 30px;
  margin-top: 10px;
}

.title2 {
  background: #FFEFF5;
  width: 94%;
  margin: 0 auto;
  padding: 5px 10px;
  font-size: 20px;
  color: #111111;
  line-height: 40px;
  text-align: justify;
  font-style: normal;
}

.time2 {
  width: 94%;
  margin: 0 auto;
  font-weight: 400;
  font-size: 16px;
  color: #111111;
  line-height: 24px;
  text-align: left;
  font-style: normal;
  padding: 16px 0px;
}

.banner2 {
  width: 94%;
  margin: 0 auto;
  padding-bottom: 20px;
  background: #FFEFF5;
}

.split2 {
  width: 100%;
  height: 24px;
  background: #E81566;
  text-align: center;
  font-weight: 400;
  font-size: 12px;
  color: #FFFFFF;
  line-height: 24px;
}

.left {
  float: left;
  width: 100%;
}

table td {
  text-align: center;
}

tr:nth-child(even) {
  background: #FADDE8;
}

.container2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 60px;
}

.container3 {
  margin-left: 32px;
  display: flex;
  gap: 20px; /* 设置间距为5px */
}
.box {
  width: 50%; /* 你可以根据需要调整宽度 */
  height: 420px;
  border: 1px solid #ccc; /* 可选：添加边框 */
}
.title3 {
  margin-left: 32px;
  font-size: 18px;
  line-height: 27px;
}

.c31 {
  color: gray;
  margin: 10px 15px;
  font-size: 16px;
}

.title-text span {
  display: block;
  /*设置为块级元素会独占一行形成上下居中的效果*/
  position: relative;
  /*定位横线（当横线的父元素）*/
  /*居中文字的颜色*/
  text-align: center;
}

.title-text span:before, .title-text span:after {
  content: '';
  position: absolute;
  /*定位背景横线的位置*/
  top: 50%;
  background: #8c8c8c;
  /*背景横线颜色*/
  width: 35%;
  /*单侧横线的长度*/
  height: 1px;
}

.title-text span:before {
  left: 2%;
  /*调整背景横线的左右距离*/
}

.title-text span:after {
  right: 2%;
}

/deep/ .el-checkbox__label {
  white-space: normal;  /* 换行 */
  padding-right: 20px;
}

/deep/ .el-radio__label {
  padding-right: 20px;
}

.container4 {
  margin: 60px auto 10px auto;
  width: 240px;
  height: 240px;
}

.title4 {
  text-align: center;
  width: 100%;
  margin: 0 auto;
  height: 27px;
  font-size: 18px;
  font-weight: 500;
}

/* 底部样式 */
.footer {
  height: 65px;
  background-color: #E81566;
  color: white;
  align-items: center;
  justify-content: center;
}

.footer1 {
  text-align: center;
  color: white;
  font-size: 14px;
  margin: 3px 0 0 0;
}

/* 相册样式 */
.photo-gallery {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.photo-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.photo-item {
  cursor: pointer;
  transition: transform 0.3s;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.photo-item:hover {
  transform: scale(1.03);
}

.thumbnail {
  width: 228px;
  height: 342px;
  object-fit: cover;
  display: block;
}

/* 模态框样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  cursor: zoom-out;
}

.modal-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  text-align: center;
}

.enlarged-photo {
  max-width: 100%;
  max-height: 85vh;
  display: block;
  margin: 0 auto;
}

.close {
  position: absolute;
  top: -40px;
  right: 0;
  color: white;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
}

.photo-title {
  color: white;
  margin-top: 10px;
  font-size: 18px;
}

/* 导航按钮样式（可选） */
.nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.2);
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
}

.prev {
  left: 20px;
}

.next {
  right: 20px;
}

.cancel_btn {
  width: 100px;
  height: 40px;
}

.ok_btn {
  width: 100px;
  height: 40px;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* 可选：设置多选框之间的间距 */
}

.checkbox-item {
  width: calc(33.33% - 16px); /* 3列布局，减去间距 */
  box-sizing: border-box; /* 确保 padding 和 border 不影响宽度 */
}
</style>
